<template>
  <div class="toggle-router">
      <div class="container">
          <div class="model-title">所有通道信息</div>
          <!-- 通道信息列表 -->
          <div class="filter-box">
            <span>选择通道：</span>
             <el-select v-model="brand_id" @change="handleChangeBrand" placeholder="请选择">
                <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
          </div>
          <div class="channel-list-box">
              <div class="channel-list">
                 <table border="0" cellspacing="0">
                    <thead>
                      <tr>
                        <th v-for="cell in channelList_header" :key="cell.prop">
                          <div class="table-cell" v-html="cell.label"></div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(cell,index) in channelList" :key="index">
                          <td>
                            <div class="table-cell">
                              <span v-html="cell.id"></span>
                            </div>
                          </td>
                          <td>
                            <div class="table-cell">
                               <img class="channel-logo" :src="cell.log" alt="♦">
                               <span v-html="cell.name+'-'+cell.channelParams+'-'+cell.channelTag"></span>
                            </div>
                          </td>
                          <td>
                            <div class="table-cell">
                              <el-button @click="queryChannelDetail(cell)">通道详情</el-button>
                            </div>
                          </td>
                          <td>
                            <div class="table-cell">
                              <el-button @click="toggleRouter(cell)">切换路由</el-button>
                            </div>
                          </td>
                      </tr>
                    </tbody>
                 </table>
              </div>
          </div>

      </div>

      <!-- dialog模态框显示通道详情和切换路由 -->
      <el-dialog 
        :title="dialog.title"
        :visible.sync="dialog.show"
        class="model-box"
        :before-close="beforeCloseDialog">
        <div v-if="dialog.action === 'channel-detail'">
          <el-table
              :data="detailList"
              style="width: 100%">
              <el-table-column v-for="cell in detailList_header" :key="cell.prop"
                :prop="cell.prop"
                :label="cell.label"
                width="100"
                :formatter = formatterList>
              </el-table-column>
            </el-table>
        </div>
        <div v-else-if="dialog.action ==='toggle-router'">
          <channelRouter :cell="currentCell" @close-dialog="dialog.show = false" :brandcode="brand_id"/> 
        </div>
        <div v-else class="no-data">
          nothing
        </div>
      </el-dialog>
  </div>
</template>

<script>
import channelRouter from "./temp/channelRouter.vue"; 

function formatterType(value){
  if(value === "0"){
    return "开发中...";
  }else if(value === "1"){
    return "开启";
  }else if(value === "2"){
    return "关闭";
  } else{
    return value;
  }
}
export default {
  name:'toggle-router',
  data () {
    return {
        brand_id:1,
        currentCell:{},
        brandList:[],
        detailList_header:[
          {prop:"brandcode",label:"贴牌"},
          {prop:"id",label:"路由编号"},
          {prop:"channelName",label:"通道名称"},
          {prop:"channelcode",label:"虚拟通道tag"},
          {prop:"targetChannelTag",label:"真实通道tag"},
          {prop:"type",label:"类型"},
        ],
        detailList:[],
        channelList_header:[
          {prop:"id",label:"通道编号"},
          {prop:"name",label:"通道名称"},
          {prop:"detail",label:"已配置通道"},
          {prop:"toggle",label:"操作"}
        ],
        channelList:[],
        dialog:{
          show:false,
          title:"",
          action:""
        }
    };
  },
  components: {channelRouter},
  created() {
    this.init();//初始化
  },
  mounted() {},
  methods: {
    init(){
      // 获取通道列表
      this.getChannelList();
      // 获取品牌列表
      let url = `user/brand/query/all`;
      this.$Http.get(url).then(res=>{
        if(res.data.resp_code === "000000"){
          this.brandList = res.data.result; 
        }else{
          this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '提示',
            message: "获取品牌信息失败！"
        });
      })
    },
    queryChannelDetail(cell){
      // 查看通道详情
      this.dialog.title = "通道详情";
      this.dialog.action = "channel-detail";
      let url = `paymentchannel/route/query/all`,
          params = `brandcode=${this.brand_id}&channel_tag=${cell.channelTag}`;
      this.$Http.post(url,params).then(res=>{
         if(res.data.resp_code === "000000"){
           this.detailList =res.data.result;
           this.dialog.show = true;
         }else{
           this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
         }
      }).catch(err=>{
        this.$notify.error({
            title: '提示',
            message: "获取通道详情失败！"
        });
      })    
    },
    toggleRouter(cell){
      // 切换路由
      this.currentCell = cell;
      this.dialog.title = "路由切换";
      this.dialog.action = "toggle-router";
      this.dialog.show = true;
    },
    handleChangeBrand(value){
      this.brand_id = value;
      this.getChannelList();
    },
    getChannelList(){
      // 获取通道列表    
      let url = `user/channel/query/all`,
          params = `brand_id=${this.brand_id}`;
      this.$Http.post(url,params).then(res=>{
        if(res.data.resp_code === "000000"){
          // 获取成功
          this.channelList =res.data.result;
        }else{
          this.$notify.info({
            title:"提示",
            message:res.data.resp_message
          })
        }
      }).catch(err=>{
          this.$notify.error({
            title:"错误",
            message:"获取通道列表失败！"
          })
      })
    },
    beforeCloseDialog(){
      this.dialog.show = false;
      setTimeout(()=>{
        this.dialog.action = "";
      },500)
    },
    formatterList(row, column, cellValue, index){
      if(column.label === "类型"){
        return formatterType(cellValue)
      }else{
        return cellValue===null?'--':cellValue;
      }
    }
   


  }
}

</script>
<style scoped>
.toggle-router{
  padding: 20px;
  box-sizing: border-box;
}
.filter-box{
  border: 1px solid #ededed;
  padding: 20px 40px;
}
.channel-list-box{
  min-height:300px; 
}
.channel-logo{
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
table{
    background-color: #FFF;
    width: 100%;
    font-size: 12px;
    min-width: 900px;
}
th{
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
    
}
thead{
    padding: 8px 0;
    color: #909399;
}
tr{
    padding: 8px 0;
}
tr:hover{
    background-color: #F5F7FA;
}
td{
    border: none;
    border-bottom: 1px solid #ebeef5;
}
.table-cell{
    white-space: normal;
    word-break: break-all;
    line-height: 22px;
    padding: 10px 10px;
    text-align: center;
    min-width: 40px;
    box-sizing: border-box;
}
</style>